<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2025/8/29
  Time: 19:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        /*重用 分页数据显示方法：
        //3种情况调用方法：
           A。登录成功--->该页：不带条件，默认第一页，
           B.点击查询按钮---该页： 带条件，默认第一页
           C。点击【上一页，下一页】---该页：带条件，不确定第几页
        */

        $(document).ready(function () {
            //1. A。登录成功--->该页：不带条件，默认第一页，
            show(1,-1,"",-1);

            //2.B.点击查询按钮---该页： 带条件，默认第一页
            $("[value='查询']").click(function () {
                var booktype=$("select[name='booktype']").val();
                var bookname=$("#bookName").val();
                var bookborrow=$("select[name='bookborrow']").val();
                show(1,booktype,bookname,bookborrow);
            });
        });

        function show(indexpage,booktype,bookName,bookborrow) {
            $.get("bookinfo/showdt",
                {"indexpage":indexpage,
                    "booktype":booktype,
                    "bookName":bookName,
                    "bookborrow":bookborrow},
                function (ph) {
                    JSON.stringify(ph);
                    //1.ph.list 遍历到表格里
                    $("tbody").empty();
                    //alert(ph.listIndex.length)
                    for (var i = 0; i <ph.listIndex.length ; i++) {
                        var obj=ph.listIndex[i];
                        $("        <tr>\n" +
                            "            <td>"+obj.bookcode+"</td>\n" +
                            "            <td>"+getType(obj.booktype)+"</td>\n" +
                            "            <td>"+obj.bookname+"</td>\n" +
                            "            <td>"+obj.bookauthor+"</td>\n" +
                            "            <td>"+obj.publishpress+"</td>\n" +
                            "            <td>"+(obj.isborrow==0?"未借阅":"已借阅")+"</td>\n" +
                            "        </tr>").appendTo("tbody");
                    }

                    //2.ph.属性 追加到 表格foot里
                    $("tfoot").empty();
                    if(ph.pageIndex!=1){
                        $("<input type='button' value='上一页' alt='"+(ph.pageIndex-1)+"'/>").appendTo("tfoot");
                    }
                    for (var i = 1; i <=ph.pageCount ; i++) {
                        $("<input type='button' value='"+i+"' alt='"+i+"'/>").appendTo("tfoot");
                    }
                    if(ph.pageIndex!=ph.pageCount){
                        $("<input type='button' value='下一页' alt='"+(ph.pageIndex+1)+"'/>").appendTo("tfoot");
                    }
                    $("<i alt='"+ph.pageCount+"'>共"+ph.pageCount+"页</i>").appendTo("tfoot");
                    $("到第<input type='text' id='pageindex'/> 页</i>").appendTo("tfoot");
                    $("<input type='button' value='确定' alt='确定'/>").appendTo("tfoot");
                });
        }
        function getType(type) {
            var str;
            if(type==1){
                str="小说"
            }else if(type==2){
                str="文学"
            }else if(type==3){
                str="IT"
            }else if(type==4){
                str="艺术"
            }else if(type==5){
                str="科幻"
            }else if(type==6){
                str="管理"
            }
            return str;
        }
        //3.  C。点击【上一页，下一页】---该页：带条件，不确定第几页
        $(document).on("click","input[alt]",function () {
            var pageindex;
            if($(this).attr("alt")=="确定"){
                if($("#pageindex").val()>=1 && $("#pageindex").val() <= $("i").attr("alt")){
                    pageindex=$("#pageindex").val();
                }else{
                    pageindex=1;
                }
            }else{
                pageindex=$(this).attr("alt");
            }
            var booktype=$("select[name='booktype']").val();
            var bookname=$("#bookName").val();
            var bookborrow=$("select[name='bookborrow']").val();
            show(pageindex,booktype,bookname,bookborrow);
        });

    </script>

</head>
<body>
<div style="align-content: center">
    <b>图书借阅系统</b><br/>
    图书分类：<select name="booktype">
    <option value="-1">请选择</option>
    <option value="1">小说</option>
    <option value="2">文学</option>
    <option value="3">IT</option>
    <option value="4">艺术</option>
    <option value="5">科幻</option>
    <option value="6">管理</option>
</select>
    图书名称：<input type="text" id="bookName"/>
    是否借阅：<select name="bookborrow">
    <option value="-1">请选择</option>
    <option value="0">未借阅</option>
    <option value="1">已借阅</option>
</select>
    <input type="button" value="查询"/>
</div>
<table>
    <thead>
    <tr>
        <td>图书编号</td>
        <td>图书分类</td>
        <td>图书名称</td>
        <td>作者</td>
        <td>出版社</td>
        <td>借阅</td>
    </tr>
    </thead>
    <tbody></tbody>
    <tfoot></tfoot>

</table>

</body>
</html>
